<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=Firefox">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>群星网约车</title>
  <link rel="icon" href="../image/carMR.png" type="image/png">
  <link rel="stylesheet" href="../css/style.css">
  <script src="../js/axios-0.18.0.js"></script>
</head>
<body>
<div id="app">
  <el-container>
    <el-main>
      <div class="container">
        <div class="spinBtn">Spin</div>
        <div class="wheel">
          <div class="number" style="--i:1;--clr:#db7093;"><span>1</span></div>
          <div class="number" style="--i:2;--clr:#20b2aa;"><span>2</span></div>
          <div class="number" style="--i:3;--clr:#b63e92;"><span>3</span></div>
          <div class="number" style="--i:4;--clr:#daa520;"><span>4</span></div>
          <div class="number" style="--i:5;--clr:#ff340f;"><span>5</span></div>
          <div class="number" style="--i:6;--clr:#ff7f50;"><span>6</span></div>
          <div class="number" style="--i:7;--clr:#3cb371;"><span>7</span></div>
          <div class="number" style="--i:8;--clr:#4169e1;"><span>8</span></div>
        </div>
      </div>
    </el-main>
  </el-container>
</div>
<script>
  const wheel = document.querySelector('.wheel'),
          spinBtn = document.querySelector('.spinBtn');
  let value = [45, 135, 225, 315, 405, 495, 585, 675];
  var spinsLeft = localStorage.getItem('raffleNum');
  var userId=localStorage.getItem('userId');
  var userIdInt = parseInt(userId, 10);
  spinBtn.onclick =  function() {
    if (spinsLeft > 0) {
      const rotateNum = Math.ceil(Math.random() * 10); // 随机的旋转圈数
      const offset = Math.ceil(Math.random() * 360 * rotateNum); // 随机的偏移角度，考虑到多圈旋转
      const finalAngle = offset; // 最终的旋转角度
      console.log("+++"+rotateNum);
      console.log("+++"+offset);
      rotateWheel(finalAngle); // 调用旋转转盘函数
      axios.put(`/user/users/updateRnum/${userIdInt}`)
              .then(response=>{
                if (response.data.code === 1) {
                  // this.$message.success('好运连连');
                } else {
                  /* 				this.errorMessage = response.data.message;
                                  this.$message.error(this.errorMessage); */
                }
              })
              .catch(error => {
                console.error('修改请求出错:', error);
                // this.$message.error('修改请求出错');
              });
      spinsLeft--;
      localStorage.setItem('raffleNum', spinsLeft);
    } else {
      alert("每天只能转动三次！"); // 提示每天只能转动三次
    }
  }

  function rotateWheel(angle) {
    let selectedNumber;
    let userCoupons;
    wheel.style.transition = 'transform 5s ease-out'; // 添加过渡效果
    wheel.style.transform = `rotate(${angle}deg)`; // 旋转转盘

    setTimeout(() => {
      const stopAngle = angle % 360; // 计算准确的停止角度
      selectedNumber = calculateSelectedNumber(stopAngle); // 获取停止角度对应的奖项
      console.log(selectedNumber);
      const chineseNumbers = ['一', '二', '三', '四', '五', '六', '七', '八'];

      // 将数字 1 转换为汉字 "一"
      const num = selectedNumber-1;
      const chineseNum = chineseNumbers[num];
      userCoupons = {
        userId: userIdInt,
        couponName: chineseNum+'折优惠券'
      };
      axios.post(`/user/users/updateCoupon`, userCoupons)
              .then(response => {
                if (response.data.code === 1) {
                  console.log("成功插入优惠券");
                }
              })
              .catch(error => {
                console.error("插入优惠券失败:", error);
              });
    }, 5000); // 等待5秒后执行
  }

  function calculateSelectedNumber(angle) {
    let index;
    if (angle >= 22.5 && angle < 67.5) {
      index = 7;
    } else if (angle >= 67.5 && angle < 112.5) {
      index = 6;
    } else if (angle >= 112.5 && angle < 157.5) {
      index = 5;
    } else if(angle >= 157.5 && angle < 202.5){
      index = 4;
    }else if(angle >= 202.5 && angle < 247.5){
      index = 3;
    }else if(angle >= 247.5 && angle < 292.5){
      index = 2;
    }else if(angle >= 292.5 && angle < 337.5){
      index = 1;
    }else{
      index=0;
    }
    return document.querySelectorAll('.number span')[index].innerText; // 返回对应角度的奖项
  }

</script>
<script>
  // request拦截器，将用户token放入头中
  let token = localStorage.getItem("token");
  axios.interceptors.request.use(
          config => {
            if(token) config.headers['authorization'] = token
            return config
          },
          error => {
            console.log(error)
            return Promise.reject(error)
          }
  )
</script>
</body>
</html>